<template>
  <div class="main-container">
    <div class="container">
      <div class="left">
        <div class="header">
          <div class="label">单位</div>
          <div class="value">石漫滩水库</div>
        </div>
        <div class="content">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item class="is-active" title="日常检查" name="1">
              <ul>
                <li v-for="item in leftTopList" :key="item.id">{{ item.text }}</li>
              </ul>
            </el-collapse-item>
            <el-collapse-item class="is-active" title="年度检查" name="2">
              <ul>
                <li v-for="item in leftDownList" :key="item.id">{{ item.text }}</li>
              </ul>
            </el-collapse-item>
            <el-collapse-item title="汛前检查" name="3"> 汛前检查 </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="right">
        <div class="up">
          <el-form :model="form" label-width="auto" style="max-width: 600px">
            <div class="condition-box">
              <el-form-item label="任务名称">
                <el-input v-model="form.taskName" placeholder="请输入任务名称" />
              </el-form-item>
              <el-form-item label="任务类型">
                <el-input v-model="form.taskType" placeholder="请选择" />
              </el-form-item>
              <el-form-item label="巡查人">
                <el-input v-model="form.insUser" placeholder="请输入巡查人" />
              </el-form-item>
              <el-form-item label="任务状态">
                <el-input v-model="form.planState" placeholder="请选择" />
              </el-form-item>
              <el-form-item label="巡查结果">
                <el-input v-model="form.planState" placeholder="请选择" />
              </el-form-item>
              <el-form-item label="代办人">
                <el-input v-model="form.dealUser" placeholder="请输入代办人" />
              </el-form-item>
            </div>
            <div class="condition-btn">
              <el-button type="primary" @click="query">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-form>
        </div>
        <div class="down">
          <div class="btn-group">
            <el-button @click="add">
              <span class="icon iconfont icon-tianjia"></span>
              <span>添加</span>
            </el-button>
            <el-button @click="del">
              <span class="icon iconfont icon-xiugaioryijian"></span>
              <span>修改</span>
            </el-button>
            <el-button @click="cancel">
              <span class="icon iconfont icon-shanchu"></span>
              <span>删除</span>
            </el-button>
            <el-button @click="report">
              <span class="icon iconfont icon-zuofei"></span>
              <span>任务作废</span>
            </el-button>
            <el-button @click="reverse">
              <span class="icon iconfont icon-daochu2"></span>
              <span>问题上报</span>
            </el-button>
            <el-button @click="update">
              <span class="icon iconfont icon-daochu4"></span>
              <span>派发</span>
            </el-button>
          </div>
          <div class="list-group">
            <el-table :data="list" :border="true" style="width: 100%">
              <el-table-column prop="id" label="序号" width="60" />
              <el-table-column prop="taskType" label="任务类型" />
              <el-table-column prop="taskName" label="任务名称" />
              <el-table-column prop="planInsUser" label="计划巡查人" />
              <el-table-column prop="insUser" label="巡查人" />
              <el-table-column prop="planDate" label="计划日期" />
              <el-table-column prop="actDate" label="实际日期" />
              <el-table-column prop="planState" label="任务状态" />
              <el-table-column prop="dealUser" label="代办人" />
            </el-table>
          </div>
          <div class="page">
            <el-pagination
              v-model:current-page="currentPage4"
              v-model:page-size="pageSize4"
              :page-sizes="[10, 20, 50, 100]"
              :size="size"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
  <Add ref="addRef" />
</template>

<script setup lang="ts" name="List">
import { ref, reactive, onMounted } from 'vue'
import { type InspectionInter, type InspectionList } from '@/types/inspection'
import type { ComponentSize } from 'element-plus'
import Add from '@/views/inspect/add.vue'

let addRef = ref()
const form: InspectionInter = reactive({
  id: 1,
  taskType: '',
  taskName: '',
  planInsUser: '',
  insUser: '',
  planDate: '',
  actDate: '',
  planState: '',
  dealUser: ''
})

const query = () => {
  console.log('query!')
}
const reset = () => {
  console.log('reset!')
}

const background = ref(true)
const disabled = ref(false)
const currentPage4 = ref(4)
const pageSize4 = ref(10)
const size = ref<ComponentSize>('default')

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const leftTopList = reactive([
  { id: 1, text: '日常巡查(小巡查)' },
  { id: 2, text: '泄洪放空间巡查' },
  { id: 3, text: '新建泄洪放空间巡查' },
  { id: 4, text: '副坝巡查' },
  { id: 5, text: '配电系统巡查' },
  { id: 6, text: '备用电源检查操作运行记录' },
  { id: 7, text: '控制系统检查' }
])
const leftDownList = reactive([
  { id: 1, text: '水库大检查' },
  { id: 2, text: '配电系统检查' },
  { id: 3, text: '金属结构及启闭设施检查' },
  { id: 4, text: '备用电源检查操作运行记录' },
  { id: 5, text: '控制系统检查' }
])

let activeNames = ref(['1'])
const handleChange = (val: string[]) => {
  console.log(val)
}

const list: InspectionList = reactive([])

function initList() {
  for (let i = 0; i < 10; i++) {
    list.push({
      id: i + 1,
      taskType: '日常巡检',
      taskName: '任务名称',
      planInsUser: '张三、李四',
      insUser: '张三、李四',
      planDate: '2024-06-05 08:00:00',
      actDate: '2024-06-05 08:03:00',
      planState: '负责人审核',
      dealUser: 'admin'
    })
  }
}

function add() {
  addRef.value.isShow = true
}
function update() {
  console.log('update!')
}
function del() {
  console.log('del!')
}
function cancel() {
  console.log('cancel!')
}
function report() {
  console.log('report!')
}
function reverse() {
  console.log('reverse!')
}
onMounted(() => {
  initList()
})
</script>

<style lang="scss" scoped>
.add-modal {
  .header {
  }
}
.main-container {
  .container {
    display: flex;
    margin-top: 20px;
    .left {
      min-width: 260px !important;
      flex: 1;
      height: calc(100vh - 146px);
      margin-right: 20px;
      background-color: white;
      border-radius: 5px;
      padding: 15px;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
      .header {
        width: 100%;
        display: flex;
        margin-bottom: 10px;
        .label {
          margin-right: 20px;
        }
        .value {
          font-weight: bold;
        }
      }

      .content {
        width: 100%;
        :deep(.el-collapse) {
          .el-collapse-item {
            .el-collapse-item__header {
              font-size: 14px;
              font-weight: bold;
              padding: 0px 10px;
              background-color: #f7f9fc !important;
            }
            .el-collapse-item__content {
              background-color: #f7f9fc !important;
              padding: 0px 0px 1px 0px;
              ul {
                padding: 0px 10px;
                li {
                  list-style: none;
                  padding: 5px 10px;
                  font-weight: bold;
                  margin-bottom: 10px;
                  background-color: white;
                  border-radius: 5px;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
    .right {
      width: 75%;
      min-width: 800px;
      align-items: center;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .up {
        width: 100%;
        margin-bottom: 20px;
        border-radius: 5px;
        padding: 10px 15px 15px 15px;
        background-color: white;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
        :deep(.el-form) {
          width: 100%;
          height: 100%;
          max-width: none !important;
          display: flex;
          align-items: center;
          align-content: center;

          .condition-box {
            flex: 1;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
            margin-right: 20px;
            .el-form-item {
              width: 32%;
              margin: 8px 0px;
            }
            .el-form-item--default {
              margin-bottom: 0px !important;
            }
          }
          .condition-btn {
            width: 150px;
            align-self: flex-end;
            display: flex;
            padding: 0px 0px 0px 0px;
          }
        }
      }
      .down {
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
        width: 100%;
        border-radius: 5px;
        background-color: white;
        padding: 15px;
        flex: 1;
        .btn-group {
          button {
            .icon {
              font-size: 14px;
              margin-right: 5px;
            }
          }
        }

        .list-group {
          margin-top: 15px;
          :deep(.el-table--default) {
            font-size: 14px;
            .el-table__header-wrapper {
              .el-table__header {
                .el-table__cell {
                  background-color: #f7f9fc;
                  font-weight: bold;
                  color: #333;
                }
              }
            }
          }
        }
        .page {
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
